import './LocalWeather.css';
import React, {useEffect, useState} from "react";
import WeatherApi from "@/api/weather";
import {WeatherAll} from "@/types/weather.ts";
import LocationSvg from "@/assets/svg/location.svg?react";
import WindSpeedSvg from "@/assets/svg/windspeed.svg?react";
import RfSvg from "@/assets/svg/rf.svg?react";
import ErrorSvg from "@/assets/svg/error.svg?react";
import Chart from "@/components/Echart";
import Sider from "antd/es/layout/Sider";
import DropDownDistrictSelector from "@/components/DropDownDistrictSelector";
import {formatDisplayDateTime} from "@/utils/time.ts";


const siderStyle: React.CSSProperties = {
    overflow: 'y',
    marginLeft: "1%",
    height: '100vh',
    position: 'sticky',
    insetInlineStart: 0,
    top: 0,
    bottom: 0,
    scrollbarWidth: 'thin',
    background: "#ffffff",
    scrollbarGutter: 'stable',
};

export default function LocalWeather() {
    const [weatherAll, setWeatherAll] = useState<WeatherAll>()
    const [fetchSuccess, setFetchSuccess] = useState(true);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        // 获取本地天气数据
        WeatherApi.fetchLocalWeather().then(r => {
            if (r.status === 200) {
                setWeatherAll(r.data.data);
            } else {
                console.error(r.data.message);
                // 请求失败
                setFetchSuccess(false);
            }
            setLoading(false);
        }).catch(e => {
            console.error(e);
            setLoading(false);
            // 请求失败
            setFetchSuccess(false);
        });
    }, []);

    const fetchLocalWeatherByAdcode = (adcode: string) => {
        setLoading(true);
        WeatherApi.fetchLocalWeatherByAdcode(adcode).then(r => {
            if (r.status === 200) {
                setWeatherAll(r.data.data);
                setFetchSuccess(true);
            } else {
                console.error(r.data.message);
                // 请求失败
                setFetchSuccess(false);
            }
            setLoading(false);
        }).catch(e => {
            console.error(e);
            setLoading(false);
            // 请求失败
            setFetchSuccess(false);
        });
    }

    return (
        <Sider style={siderStyle} width={"21%"}>
            <div className="weather-container">
                <div className="weather-header">
                    <h1>我的天气</h1>
                </div>
                {
                    loading ? (
                        <div className="loading-page">
                            <div className="sider-loading"></div>
                        </div>
                    ) : fetchSuccess ? (
                        <>
                            <div className="weather-location" style={{ position: "relative", zIndex: 1 }}>
                                <span className="city"><LocationSvg/> {weatherAll?.location.name}</span>
                                <DropDownDistrictSelector onSelected={fetchLocalWeatherByAdcode}/>
                                <span className="local-weather-uptime">{formatDisplayDateTime(weatherAll?.now.uptime)}更新</span>
                            </div>
                            <div className="weather-main">
                                <h2 className="temperature">{weatherAll?.now.temp}</h2>
                                <span className="temperature-unit">°C</span>
                                <div className="weather-main-other">
                                    <p><WindSpeedSvg/>{weatherAll?.now.wind_dir} {weatherAll?.now.wind_class}</p>
                                    <p><RfSvg/>相对湿度 {weatherAll?.now.rh}%</p>
                                </div>
                            </div>
                            <hr/>
                            <Chart data={weatherAll}/>
                        </>
                    ) : (
                        <>
                            <div className="error-page">
                                <h1>
                                    <span className="error-svg"><ErrorSvg/></span>
                                    <span className="error-msg">获取本地天气数据失败</span>
                                </h1>
                            </div>
                        </>
                    )
                }
            </div>
        </Sider>
    )
}